<template>
  <div class="goods-add">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加商品</span>
      </div>
      <div class="text item">
        <el-form
          size="small"
          :model="goodsAddForm"
          status-icon
          :rules="rules"
          ref="goodsAddForm"
          label-width="100px"
          class="demo-ruleForm"
          hide-required-asterisk
        >
          <el-form-item label="所属分类" prop="gType">
            <el-select v-model="goodsAddForm.gType" placeholder="选择分类">
              <el-option label="日用百货类" value="日用百货类"></el-option>
              <el-option label="食品类" value="食品类"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品条形码" prop="barCode">
            <el-input
              type="text"
              v-model="goodsAddForm.barCode"
              autocomplete="off"
              style="width: 250px;margin-right:20px"
            ></el-input>
            <el-button type="primary" @click="getBarCode(2)">生成条形码</el-button>
          </el-form-item>
          <el-form-item label="商品名称" prop="gName">
            <el-input
              type="text"
              v-model="goodsAddForm.gName"
              autocomplete="off"
              style="width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品售价" prop="salePrice">
            <el-input type="text" v-model="goodsAddForm.salePrice" autocomplete="off"></el-input>&nbsp;元
            <!--<div style="height:16px;line-height:16px;font-size:12px;color:#aaa">默认市场价为售价的1.2倍</div>-->
          </el-form-item>
          <el-form-item label="入库数量" prop="goodsNum">
            <el-input type="text" v-model="goodsAddForm.curNum" autocomplete="off"></el-input>
            <div style="height:16px;line-height:16px;font-size:12px;color:#aaa">计重商品单位为件</div>
          </el-form-item>
          <!--<el-form-item label="商品单位" prop="goodsUnit">-->
            <!--<el-select v-model="goodsAddForm.goodsUnit" placeholder="选择单位">-->
              <!--<el-option label="个" value="个"></el-option>-->
              <!--<el-option label="件" value="件"></el-option>-->
              <!--<el-option label="盒" value="盒"></el-option>-->
              <!--<el-option label="斤" value="斤"></el-option>-->
              <!--<el-option label="袋" value="袋"></el-option>-->
              <!--<el-option label="瓶" value="瓶"></el-option>-->
              <!--<el-option label="箱" value="箱"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="会员优惠" prop="discount">-->
            <!--<el-radio-group v-model="goodsAddForm.discount">-->
              <!--<el-radio label="享受"></el-radio>-->
              <!--<el-radio label="不享受"></el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="是否促销" prop="promotion">-->
            <!--<el-switch v-model="goodsAddForm.promotion"></el-switch>-->
          <!--</el-form-item>-->
          <el-form-item label="商品产地" prop="origin">
            <el-input type="text" v-model="goodsAddForm.origin" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品保质期" prop="shelfLife">
            <el-input type="text" v-model="goodsAddForm.shelfLife" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品规格" prop="size">
            <el-input type="text" v-model="goodsAddForm.size" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">添加</el-button>
            <el-button @click="resetForm('goodsAddForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsAddForm: {
        gType: "",
        barCode: "",
        gName: "",
        salePrice: "",
        curNum: "",
        origin: "",
        shelfLife: "",
          size:""
      },
      rules: {
          gType: [
          { required: true, message: "请选择分类", trigger: "change" }
        ],
        barCode: [
          { required: true, message: "条形码不能为空", trigger: "blur" },
          { min: 13, max: 13, message: "条形码长度为 13 位", trigger: "blur" }
        ],
        gName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        salePrice: [
          { required: true, message: "商品售价不能为空", trigger: "blur" }
        ],
        curNum: [
          { required: true, message: "入库数量不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //生成条形码函数
    getBarCode(n) {
      var rnd = "";
      for (var i = 0; i < n; i++) rnd += Math.floor(Math.random() * 10);
      this.goodsAddForm.barCode = "69119892625" + rnd;
      //触发条形码验证
      this.$refs.goodsAddForm.validateField("barCode");
    },
    //表单提交函数
    submitForm() {
        // gType: this.goodsEditForm.gType,
        //     barCode: this.goodsEditForm.barCode,
        //     gName: this.goodsEditForm.gName,
        //     salePrice: this.goodsEditForm.salePrice,
        //     curNum: this.goodsEditForm.curNum,
        //     gId: this.goodsEditForm.gId,
        //     origin:this.goodsEditForm.origin,
        //     size:this.goodsEditForm.size
        this.$axios
            .post(
                "goods/insert",
                {
                    gType: this.goodsAddForm.gType,
                        barCode: this.goodsAddForm.barCode,
                        gName: this.goodsAddForm.gName,
                        salePrice: this.goodsAddForm.salePrice,
                        curNum: this.goodsAddForm.curNum,
                        origin:this.goodsAddForm.origin,
                        size:this.goodsAddForm.size,
                    shelfLife:this.goodsAddForm.shelfLife
                }
            )
            .then(response => {

                let { code, message } = response.data;
                if(code === 200)
                {
                    this.$message({
                    //弹出成功提示
                    showClose: true,
                    type: "success",
                    message: message
                });
                    this.$router.push("/index");
                }else if (code === 400 ) {
                    this.$message.error(message);
                }
                console.log(response.data)
                //设置getTotal
            })
    },
    //表单重置函数
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less">
.goods-add {
  .el-card {
    .el-card__header {
      font-size: 20px;
      font-weight: 600;
      background-color: #f1f1f1;
    }
    .el-card__body {
      .el-form {
        .el-form-item {
          .el-form-item__content {
            .el-input {
              width: 150px;
            }
          }
        }
      }
    }
  }
}
</style>